<template>
 <div style="background:#f2f2f2;width:100%;height:100%;">
    <van-nav-bar
      title="盘点详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="topmes">
        <div class="internew">
            <span style="padding-left:22px">{{formdata.NAME}}</span>
            <span>
                <van-tag v-if ="$store.state.isEND==0" color="#fee8d6" text-color="#fe6015" size="medium">未完成</van-tag>
                <van-tag v-else color="#009cfe" text-color="white" size="medium">已完成</van-tag>
                </span>
        </div>
        <div class="internew1">
            <span>应盘总数: {{formdata.NUM}}</span>
            <!-- <span>盘点人：李燕一</span> -->
        </div>
        <div class="internew1">
            <span>创建日期:{{getExactTime(formdata.CREATEDATE)}}</span>
            <span v-if ="$store.state.isEND==1">完成时间:{{getExactTime(formdata.STOCKDATE)}}</span>
        </div>

        <div class="suspen">
            <div class="left">
                <div class="sql">
                    <span>待盘点</span>
                    <span @click="active=0" :class="active==0?'active':''">{{formdata.TODO}}</span>
                </div>
                <div class="sql">
                    <span>盘点一致</span>
                    <span @click="active=1" :class="active==1?'active':''">{{formdata.FIT==undefined?0:formdata.FIT}}</span>
                </div>
            </div>
            <div class="right">
                <div class="sql"> 
                    <span>盘盈</span>
                    <span @click="active=2" :class="active==2?'active':''">{{formdata.PROFIT==undefined?0:formdata.PROFIT}}</span>
                 </div>
                <div class="sql">
                    <span>盘亏</span>
                    <span @click="active=3" :class="active==3?'active':''">{{formdata.LOSS==undefined?0:formdata.LOSS}}</span>
                </div>
            </div>
        </div>
   
    </div>
    
    <div style="margin-top:64px" >
        <van-dropdown-menu label-class="first">
            <van-dropdown-menu label-class="first">
  <van-dropdown-item v-model="assetsClass" :options="option1" :title="assestTitle" />
</van-dropdown-menu>
            <van-field v-model="value" placeholder="输入资产名称"  right-icon="search" center @blur="handleKeyword"/>
        </van-dropdown-menu>
    </div>

    <div class="list">
        <div  v-if ="$store.state.isEND==0" class="list-item" v-for="item in listMessage" :key="item.ID">
            <div class="itemtop">
                <div class="topleft">
                    <van-checkbox v-model="item.checked" v-if="active==0"></van-checkbox>
                </div>
                <div class="topright" @click="assetsDetail(item)">
                    <div>
                        <div style="font-size:14px;" class="overflow">{{item.TXT50.split("(")[0]}}</div>
                   <div>
                        <van-tag type="danger" v-if="active==2">盘盈</van-tag>
                        <van-tag type="warning" v-if="active==3">盘亏</van-tag>
                        <van-tag type="success" v-if="active==1">盘点一致</van-tag>
                        <div v-if="option==2||option==3" class="marginLeft">实盘数量:{{item.STOCKNUM}}</div>
                    </div>
                    </div>
                    
                    <div>
                        <div>资产编码:{{item.ANLN1}}</div>
                        <div>应盘数量:{{parseInt(item.MENGE)}}</div>
                    </div>
                    <div>
                        <div>存放地：{{item.KTXT}}</div>
                        <div>所属公司：{{item.BUKRS}}</div>
                    </div>
                    <div v-if="active==2||active==3" class="beizhu">
                        备注：{{item.REMARK}}
                    </div>
                    
                </div>
            </div>
            <div class="itembot" v-if="active==0">
                <div @click="getCheck(item)">盘点一致</div>
                <div @click="getFailCheck(item)">盘点不一致</div>
            </div>
        </div>


<!-- 已完成 -->
        <div v-else class="list-item" >
            <div class="itemtop" :style="active==3||active==4?'height:110px':''">
                <div class="topleft">
                </div>
                <div class="topright" @click="assetsDetail(item)">
                    <div >
                        <div class="overflow" >{{item.TXT50.split("(")[0]}}</div>
                    <div>
                        <van-tag type="danger" v-if="active==2">盘盈</van-tag>
                        <van-tag type="warning" v-if="active==3">盘亏</van-tag>
                        <van-tag type="success" v-if="active==1">盘点一致</van-tag>
                        <div v-if="option==2||option==3" class="marginLeft">实盘数量:{{item.STOCKNUM}}</div>
                    </div>
                    </div>

                     <div>
                        <div>资产编码:{{item.ANLN1}}</div>
                        <div>应盘数量:{{parseInt(item.MENGE)}}</div>
                    </div>
                    <div>
                        <div>存放地：{{item.KTXT}}</div>
                        <div>所属公司：{{item.BUKRS}}</div>
                    </div>

                    <div v-if="active==2||active==3" class="beizhu">
                        备注：{{item.REMARK}}
                    </div>
                </div>
            </div>
            <!-- <div class="itembot">
                <div >盘点一致</div>
                <div>盘点不一致</div>
            </div> -->
        </div>
    </div>
    <div  v-if="$store.state.isEND==0">
        <div v-if="active==0" class="botbtn">
            <van-button color="#45a9de" size="small" @click="selectAll">全选</van-button>
        <van-button color="#45a9de" size="small" style="width:32%" @click="getCheckes">批量盘点一致</van-button>
        <van-button color="#45a9de" size="small" @click="DDscanCode"><van-icon name="scan" size="20"/></van-button>
        </div>
        <!-- <van-button color="#45a9de" size="small" style="width:32%">盘点确认</van-button> -->
    </div>

    <!-- dialog对话框 -->
    <van-dialog  v-model="show" title="盘点不一致" show-cancel-button @confirm="confirm" @cancel="cancel">
       <van-field label="应盘数量" :value="parseInt(isLoss.MENGE)" readonly />
        <van-field v-model="currentInstance.text" label="实盘数量" required placeholder="输入实际数量" type="number"/>
       <van-field
            v-model="currentInstance.message"
            rows="3"
            autosize
            label="备注"
            type="textarea"
            placeholder="请输入备注" 
            required
       />
    </van-dialog>
 </div>
</template>

<script>
import awsuiAxios from "../awsuiAxios";
import { Toast } from 'vant';
import * as dd from 'dingtalk-jsapi';
import { Dialog } from 'vant';
export default {
data(){
return {
      value2: '全部商品',
      listScroll:0,//滚动条高度
      isLoss:{},
      newsClass:0,
      formdata:{},
      listMessage:[],
      value:'',
      active:0,
      option:2,
      assetsClass:'',
      assestTitle:'选择资产分类',
      currentInstance:{
        number:1,
        text:'',
        message:''
      },//盘点不一致对应的实例对象
      show:false,
      option1: [
        {TXL20:"全部",text:'全部',value:""}
      ],
}
},
created(){
   
},
mounted(){
    // this.formdata = this.$store.state.CurrentAssets
   
    
},
activated() {

//    console.log(9999);
    if(this.$route.query.data==1){
         this.active = this.$store.state.active
        this.getAssetsNew()
        this.getAssetsType()
    }
    // console.log(this.$route.query);
    document.querySelector(".list").scrollTop=this.listScroll
  },
watch:{
    active(n,o){
        this.getAssetsNew()
    },
    assetsClass(n,o){
       
        this.getAssetsNew()
        this.assestTitle= this.assetsClass
    },
    value(n,o){
         this.getAssetsNew()
    }
},
methods:{
    getCheck(item){  //盘点一致
    Dialog.confirm({
  title: '',
  message: '是否确定',
})
  .then(() => {
    this.getCheckPass(item.ID)
  })
  .catch(() => {
    // on cancel
  });
        
    },
    getCheckes(){    //批量盘点一致
    let temp = ''
        this.listMessage.forEach(ele => {
           if(ele.checked==true){
             if(temp==""){
                temp+=ele.ID
            }else{
                temp+=","+ele.ID
            }
           }
        });
        this.getCheckPass(temp)
    },
    selectAll(){  //全选
        this.listMessage.forEach(item => {
            item.checked = true
        });
    },
    handleKeyword(){
         this.getAssetsNew()
    },
    getAssetsNew(){
        const that = this
         awsuiAxios.post({
              url: 'jd',
                data: {
                    cmd: "com.awspaas.user.apps.assetinventory_selectAssetDetail",
                    sid:sid,
                    bindId:that.$store.state.CurrentAssets.BINDID,
                    result:`${this.active}`,
                    type:`${that.assetsClass}`,
                    name:`${that.value}`,

                }
            }).then(function (ro) {
                if (ro.result == 'ok') {
                  
                    
                   ro.data.map.detail.forEach(item => {
                        that.$set(item,"checked",false)
                    });
                    
                    that.listMessage = ro.data.map.detail
                    that.formdata = ro.data.map.assetTask[0]
                    console.log("that.formdata",that.formdata);
                }else{
                        Toast.fail('' + ro.msg);
                      }
            }).catch(error => {
                console.log(error);
            })
    },
    getAssetsType(){
        const that = this
         awsuiAxios.post({
              url: 'jd',
                data: {
                    cmd: "com.awspaas.user.apps.assetinventory_selectType",
                    sid:sid,
                    bindId:that.$store.state.CurrentAssets.BINDID,

                }
            }).then(function (ro) {
                if (ro.result == 'ok') {
                    console.log(ro.data);
                    // that.message = ro.data.staffList
                    // that.$router.push({path:'/show',query:{data:ro.data.staffList}})
                    ro.data.types.forEach(item => {
                        item.text = item.TXL20
                        item.value = item.TXL20
                    });
                    that.option1 =  that.option1.concat(ro.data.types)
                    
                }else{
                        Toast.fail('' + ro.msg);
                      }
            }).catch(error => {
                console.log(error);
            })
    },
    getCheckPass(item){
        const that = this
         awsuiAxios.post({
              url: 'jd',
                data: {
                    cmd: "com.awspaas.user.apps.assetinventory_checkPass",
                    sid:sid,
                    ids:`${item}`

                }
            }).then(function (ro) {
                if (ro.result == 'ok') {
                    Toast.success('盘点完成');
                    that.getAssetsNew()
                    
                }else{
                        Toast.fail('' + ro.msg);
                      }
            }).catch(error => {
                console.log(error);
            })
    },
    getCheckRFailPass(){

        // let isLossTemp = this.isLoss.MENGE
        let isLossFlag = false
        if(this.isLoss.MENGE>this.currentInstance.text){
            isLossFlag = 1
        }else{
             isLossFlag = 0
        }
        const that = this
         awsuiAxios.post({
              url: 'jd',
                data: {
                    cmd: "com.awspaas.user.apps.assetinventory_checkFailPass",
                    sid:sid,
                    id:`${that.isLoss.ID}`,
                    num:parseInt(that.currentInstance.text),
                    comment:that.currentInstance.message,
                    isLoss:isLossFlag
                }
            }).then(function (ro) {
                if (ro.result == 'ok') {
                    Toast.success('盘点完成');
                    that.getAssetsNew()
                    
                }else{
                        Toast.fail('' + ro.msg);
                      }
            }).catch(error => {
                console.log(error);
            })
    },
    onClickLeft(){
        // this.$router.back()
        if(this.$store.state.isEND==0){
            this.$router.push('/')
        }else{
            this.$router.push('/testover')
        }
    },
    confirm(){
        if(this.currentInstance.text!=''&&this.currentInstance.message!=''){
        this.getCheckRFailPass()
        this.currentInstance.text = ''
        this.currentInstance.message = ''
        }else{
            Toast.fail("请填写完整")
        }
        
    },
    cancel(){
        this.currentInstance.text = ''
        this.currentInstance.message = ''
    },
    getFailCheck(item){  //盘点不一致
        
        this.show  = true
        this.isLoss = item
        // this.getCheckRFailPass(item)
    },
     DDscanCode(){
      const that = this;
      dd.ready(function () {
       
        dd.biz.util.scan({
            type: 'all', // type 为 all、qrCode、barCode，默认是all。
            onSuccess: function (val) {
            //  var textCurrent = val.text
              that.value =  val.text
            //   that.getinfo(textCurrent);
              // that.show = true;
            },
            onFail: function (err) {
              console.log(err);
            }
        })
      });
    },
    assetsDetail(item){
    this.listScroll = document.querySelector('.list').scrollTop
         this.$router.push({path:'/shower',query:{data:item}})
    },
    getExactTime(time) {
        var date = new Date(time);
        // var date = new Date(time* 1000);
        var year = date.getFullYear() + '-';
        var month = (date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + '-';
        var dates = date.getDate() + ' ';
        
        return year + month + dates ;
 }
}
}
</script>

<style scoped>
.marginLeft{
    margin-left: 2px;
}
.overflow{
    max-width:180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topmes{
    width: 100%;
    height: 150px;
    background: #cccccc;
    padding-top:10px ;
    position: relative;
}
.internew{
    width: 90%;
    margin: 18px auto;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
.internew1{
    width: 70%;
    margin:18px auto;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.suspen{
    background: white;
    width: 90%;
    height: 80px;
    margin: 0 auto;
    display: flex;

}
.left,.right {
    display: flex;
    width: 50%;
}
.sql{
    display: flex;
    flex-direction: column;
    flex: 1;
}
.suspen span {
    text-align: center;
    display: block;
    height:50%;
    line-height: 35px;
}
.suspen span:nth-child(2){
    color: #666666;
    font-size: 18px;
}
.left div:nth-child(2){
    border-right: 1px solid #f1f1f1;
}
::v-deep .van-dropdown-menu{
    /* margin-top: 64px; */
    display: flex;
    width: 100%;
}
.prop{
    width: 50%;
}
::v-deep .van-dropdown-menu__bar{
    width: 100%;
    flex: 1;
    /* margin-right: 1px; */
}

::v-deep .van-cell{
     width: 50%;
}
.list {
    margin-top:9px;
    width: 100%;
    max-height: 430px;
    background: #f2f2f2;
    overflow-y: scroll;
}
.list-item{
    width: 100%;
    /* height: 120px; */
    background: white;
    margin-bottom: 10px;
}
.itemtop{
    display: flex;
    border-bottom: 1px solid #ccc;
}
.topleft{
    display: flex;
    width: 12%;
    height: 80px;
    line-height: 80px;
    /* text-align: center; */
    padding-left: 2%;
}
.topright{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 10px 4px 0;
    width: 88%;
}

.topright  div {
    /* width: 50%; */
    /* background: red; */
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.itembot{
    display: flex;
    margin-top: 5px;
    align-content: center;
    width: 100%;
    height: 34px;
}
.itembot div{
    width: 50%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #009cfe;
    /* padding: 2px 0; */
    font-weight: bold;
}
.itembot div:nth-child(1){
    /* background: red; */
    border-right: 1px solid #ccc;
}
.active{
    color:#396ffe !important;
}
.botbtn{
    width: 100%;
    position: fixed;
    bottom: 10px;
   display: flex;
   justify-content: space-around;
}
::v-deep .botbtn .van-button{
    border-radius: 6px;
}
::v-deep .van-dropdown-menu__bar{
    box-shadow: none;
}
::v-deep .van-cell {
    width: 100%;
}

::v-deep .van-field__value .van-ellipsis{
    font-size: 12px;
}
::v-deep .van-dropdown-menu__title {
    font-size: 12px;
}
.beizhu{
    max-width:300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>